<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>

<style type="text/css">
	/* 使用flex布局,使li横向排列,两端对齐,垂直居中,并且第二个元素是其它元素的2倍宽度 */
	* {margin: 0;padding: 0;}
	ul {
		display: flex;
		height: 100px;
		background: #EFEFEF;
		list-style: none;
		/*两端对齐*/
		justify-content: space-between;
	}
	li {
		border: 1px solid;
		margin: 10px;
		text-align: center;
		line-height: 100px;
		background: green;
		/*如何分配剩余空间*/
		flex-grow: 1;
	}
	li:nth-child(2) {
		flex-grow: 3;
	}
	
	
</style>
